<div class="row clearfix" [@routerTransition]>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

        <div class="block-header row">
            <div class="col-md-6">
                <h2>
                    {{l('Events')}}
                    (<input type="checkbox" id="includeCanceledEvents" [(ngModel)]="includeCanceledEvents" (change)="includeCanceledEventsCheckboxChanged()">
                    <label for="includeCanceledEvents">{{l("ShowCanceledEvents")}}</label>)
                </h2>
            </div>
            <div class="col-md-6 text-right">
                <button type="button" data-toggle="modal" class="btn btn-primary btn-circle waves-effect waves-circle waves-float pull-right" (click)="createEvent()">
                    <i class="material-icons">add</i>
                </button>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6" *ngFor="let event of events">
                <div class="card">
                    <div [class]="event.isCancelled ? 'header bg-red' : 'header'">
                        <h2>
                            {{event.title}} <small class="event-description">{{event.description}}</small>
                        </h2>
                        <ul class="header-dropdown m-r-0">
                            <li>
                                <i class="fa fa-calendar"></i>
                            </li>
                            <li>
                                <span>{{event.date | date:'short'}}</span>
                            </li>
                        </ul>
                        <hr />
                        <div class="row">
                            <div class="col-md-6">
                                <small *ngIf="event.registrationsCount < event.maxRegistrationCount">
                                    {{l('XofYregistered', event.registrationsCount,event.maxRegistrationCount)}}
                                </small>
                                <small *ngIf="event.maxRegistrationCount > 0 && event.registrationsCount >= event.maxRegistrationCount">
                                    {{l("XregisteredNoNewRegistrationAvailable", event.registrationsCount)}}
                                </small>
                                <small *ngIf="event.maxRegistrationCount <= 0">
                                    {{l("XregisteredUnlimitedRegistrations", event.registrationsCount)}}
                                </small>
                            </div>
                            <div class="col-md-6 text-right">
                                <button type="button" class="btn bg-deep-purple waves-effect btn-sm"
                                        [routerLink]="['/app/events', event.id]">
                                    <span>{{l("Details")}}</span>
                                    <i class="fa fa-arrow-circle-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<create-event-modal #createEventModal (modalSave)="refresh()"></create-event-modal>
